<template>
    <div class="com">
        <test></test>
        <transition name="fade" mode="out-in">
          <router-view></router-view>
        </transition>
    </div>
</template>

<script>
import test from './test'
export default {
  name: 'com',
  components: {
    test
  }
}
</script>

<style lang="stylus" scoped>
  .fade-enter{
    opacity: 0
  }
  .fade-enter-active{
    opacity: 1;
    transition: opacity  .5s;
  }
  .fade-leave{
    opacity: 1
  }
  .fade-leave-active{
    opacity: 0;
    transition: opacity .5s;
  }
</style>
